<template>
  <div id="app">
      <!--定位中-->
      <section class="location-box flexc" v-if="isLocation">
          <!--定位中-->
          <div class="ico-box" v-if="!locationFail">
              <img src="@/assets/ico-location.png" alt="">
              <div class="yingzi"></div>
              <p>正在获取您的位置信息</p>
          </div>
          <!--定位失败-->
          <div class="location-fail" v-else>
              <img src="@/assets/location_fail.png" alt="" class="ico">
              <div class="btn" @click="getLocationAlaign">重新获取定位</div>
          </div>
      </section>
      <!--定位成功-->
      <div v-else>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </div>
  </div>
</template>

<script>
import AMap from 'AMap'
    export default {
      name: 'App',

      data () {
          return {
              isLocation: false, // 正在定位
              locationFail: false // 定位失败的状态
          }
      },

      created () {
          let locations = sessionStorage.getItem('locations');
          const islogin = sessionStorage.getItem('user');
          const isCode = window.location.href.indexOf('code=') !== -1;
          
          const href = window.location.href;
          // 地区定位
          if (!locations) {
              this.isLocation = true;
              this.getLocation(); 
          } else {
          }

      },
      methods: {
          // 获取定位
          getLocation() {
              // // 获取搜索地区列表数据
              AMap.plugin(["AMap.Geolocation"], () => { 
                  var geolocation = new AMap.Geolocation({
                      enableHighAccuracy: true,//是否使用高精度定位，默认:true
                      maximumAge: 0           //定位结果缓存0毫秒，默认：0
                  });
                  //获取定位信息
                  geolocation.getCurrentPosition((status, result) => {
                      if (result && result.position) {
                          console.log('获取定位成功')
                          const location = {
                              lat: result.position.lat,
                              lng: result.position.lng,
                              province: result.addressComponent.province,
                              city: result.addressComponent.city,
                              district: result.addressComponent.district,
                              address: result.addressComponent.township,
                              formattedAddress: result.formattedAddress
                          }
                          sessionStorage.setItem('locations', JSON.stringify(location));
                          this.isLocation = false;
                      } else {
                          console.log('获取定位失败');                               
                          this.locationFail = true;
                          // this.$tip('获取定位失败');
                          const location = {
                              lat: '',
                              lng: ''
                          }
                          sessionStorage.setItem('locations', JSON.stringify(location));
                          this.isLocation = false;
                      }
                  });
              })
          },

          // 重新获取定位
          getLocationAlaign () {
              this.locationFail = false;
              this.getLocation(); 
          }
      }
    }
</script>

<style lang="less">
@import url('./style/common');
  #app { 
    width: 100%;
    overflow-x: hidden;
  }
  .location-box{
      height: 100vh;
      background: #fff;
      overflow: hidden;
      .ico-box {
          text-align: center;
          font-size: 0.32rem;
          color: #666;
          img {
            width: 1rem;
            animation: location 1s infinite ease-in-out;
          }
          .yingzi {
            width: 0.6rem;
            height: 0.2rem;
            margin: 0.1rem auto 0.2rem;
            border-radius: 100%;
            background: #666;
            animation: yingzi 1s infinite ease-in-out;
          }
      }
      .location-fail {
        color: #666;
        font-size: 0.32rem;
        .ico {
            display: block;
            margin: 0 auto 0.2rem;
            width: 1rem;
        }
      }
  }
  @keyframes location {
      0% {
          transform: translate3d(0, 0, 0) ;
      }
      25% {
          transform: translate3d(0, -0.3rem, 0);
      }
      50% {
          transform: translate3d(0, -0.6rem, 0);
      }
      75% {
          transform: translate3d(0, -0.2rem, 0)       
      }
      100% {
          transform: translate3d(0, 0, 0)     
      }
  }
  @keyframes yingzi {
      0% {
          transform: scale3d(1,1,1);
      }
      50% {
          transform: scale3d(0.7, 0.7,1);
      }
      100% {
          transform: scale3d(1,1,1)     
      }
  }
  *{
      touch-action: auto;
  }
  ::-webkit-scrollbar{
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
  }
</style>
